.virtualized {
  --virtualized-cell-padding: 0 8px;
  --virtualized-cell-text-color: #3d3d3d;
  --virtualized-cell-text-size: 14px;
  --virtualized-even-bg: #fff;
  --virtualized-cell-odd-bg: #fafafa;
  --virtualized-cell-even-bg: #fff;

  --virtualized-header-cell-bg: #fafafa;
  --virtualized-header-cell-text-color: rgba(0, 0, 0, 0.85);
  --virtualized-header-cell-text-size: 14px;

  --virtualized-border-color: #f0f0f0;
  /* index */
  --z-i-body: 100;
  --z-i-header: 110;
  --z-i-body-fixed: 200;
  --z-i-header-fixed: 210;
  --z-i-shadow: 220;
  --z-i-border: 300;
  --z-i-scrollbar: 310;
  --z-i-resize: 320;
}

/* 容器 */
.virtualized {
  position: relative;
  font-size: var(--virtualized-cell-text-size);
  div {
    flex-shrink: 0;
    box-sizing: border-box;
  }
  .virtualized-grid {
    display: flex;
    position: relative;
    .virtualized-grid-inner {
      display: flex;
    }
    .virtualized-grid-header {
      display: flex;
      overflow-x: hidden;
      overflow-y: hidden;
      position: sticky;
      top: 0;
    }
    .virtualized-grid-body {
      display: flex;
      overflow-x: auto;
      overflow-y: auto;
      position: relative;
    }
    .virtualized-grid-row {
      width: 100%;
      transition:
        transform 0.2s,
        top 0.2s,
        height 0.2s;
    }
  }
}

/* 单元格 */
.virtualized {
  .virtualized-grid-cell {
    line-height: 38px;
    border: 1px solid transparent;
    border-bottom-color: var(--virtualized-border-color);
    background-color: var(--virtualized-even-bg);
    color: var(--virtualized-cell-text-color);
    height: 100%;
    overflow: hidden;
    transition: background-color 0.2s;
  }
  .virtualized-grid-header {
    .virtualized-grid-cell {
      border-bottom-color: var(--virtualized-border-color);
      background-color: var(--virtualized-header-cell-bg);
      color: var(--virtualized-header-cell-text-color);
      font-weight: 500;
    }
  }
  .virtualized-grid-body {
    .virtualized-grid-cell {
      padding: var(--virtualized-cell-padding);
    }
  }
  &.is-border {
    .virtualized-grid {
      .virtualized-grid-cell {
        border-right-color: var(--virtualized-border-color);
      }
    }
  }
  &.is-stripe {
    .virtualized-grid {
      .virtualized-grid-body {
        .virtualized-grid-row {
          &.is-odd {
            .virtualized-grid-cell {
              background-color: var(--virtualized-cell-odd-bg);
            }
          }
          &.is-even {
            .virtualized-grid-cell {
              background-color: var(--virtualized-cell-even-bg);
            }
          }
          &.is-even.is-hover {
            .virtualized-grid-cell {
              background-color: var(--virtualized-cell-odd-bg);
            }
          }
        }
      }
    }
  }
}

/* 固定列 */
.virtualized-grid {
  .virtualized-grid-center {
    position: relative;
    z-index: var(--z-i-body);
    .virtualized-grid-header {
      z-index: var(--z-i-header);
    }
  }
  .virtualized-grid-left {
    position: sticky;
    left: 0;
    z-index: var(--z-i-body-fixed);
    &:before {
      content: '';
      position: absolute;
      top: 0;
      right: -10px;
      width: 10px;
      bottom: -1px;
      overflow-x: hidden;
      overflow-y: hidden;
      box-shadow: none;
      touch-action: none;
      pointer-events: none;
      z-index: var(--z-i-shadow);
    }
    .virtualized-grid-header {
      z-index: var(--z-i-header-fixed);
    }
  }
  &.is-ping-left {
    .virtualized-grid-left {
      &:before {
        box-shadow: inset 10px 0 10px -10px rgba(0, 0, 0, 0.35);
      }
    }
  }
  .virtualized-grid-right {
    position: sticky;
    right: 0;
    z-index: var(--z-i-body-fixed);
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: -10px;
      width: 10px;
      bottom: -1px;
      overflow-x: hidden;
      overflow-y: hidden;
      box-shadow: none;
      touch-action: none;
      pointer-events: none;
      z-index: var(--z-i-shadow);
    }
    .virtualized-grid-header {
      z-index: var(--z-i-header-fixed);
    }
  }
  &.is-ping-right {
    .virtualized-grid-right {
      &:before {
        box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.35);
        // box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.06);
      }
    }
  }
}

/* 处理容器border */
.virtualized {
  .virtualized-grid {
    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      z-index: var(--z-i-border);
      width: 100%;
      height: 1px;
      background-color: var(--virtualized-border-color);
    }
    &:after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: var(--z-i-border);
      width: 100%;
      height: 1px;
      background-color: var(--virtualized-border-color);
    }
  }
  &.is-border {
    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      z-index: var(--z-i-border);
      width: 1px;
      height: 100%;
      background-color: var(--virtualized-border-color);
    }
    &:after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      z-index: var(--z-i-border);
      width: 1px;
      height: 100%;
      background-color: var(--virtualized-border-color);
    }
  }
}

/* scrollbar */
.os-scrollbar {
  &.os-scrollbar-visible {
    z-index: var(--z-i-scrollbar);
  }
}

/* resize */
.virtualized-column-resize {
  &-proxy {
    position: absolute;
    left: 200px;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px solid var(--virtualized-border-color);
    z-index: var(--z-i-resize);
  }
}

.virtualized-grid-cell {
  &.virtualized-grid-cell-multiple {
    padding: 0;
    border: none;
    .virtualized-grid-cell-children {
      display: flex;
    }
    .virtualized-grid-cell-child {
      &:not(.virtualized-grid-cell-multiple) {
        & > .virtualized-grid-cell-header-content {
          height: 100%;
        }
      }
    }
    .virtualized-grid-cell-header-content {
      border: 1px solid transparent;
      border-right-color: var(--virtualized-border-color);
      border-bottom-color: var(--virtualized-border-color);
    }
  }

  &:not(.virtualized-grid-cell-multiple) > .virtualized-grid-cell-header-content {
    height: 100%;
  }
  .virtualized-grid-cell-header-content {
    display: flex;
    align-items: center;
    padding: var(--virtualized-cell-padding);
    & > span {
      overflow: hidden;
      white-space: nowrap;
    }
  }
}
